<template>
  <div>
    <el-row :gutter="10" style="margin-bottom: 70px">
      <el-col :span="6">
        <el-card style="color: #409EFF">
          <div><i class="el-icon-user-solid"/> 用户总数</div>
          <div style="padding: 10px 0;text-align: center;font-weight: bold">
            100
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card style="color: #F56C6C">
          <div><i class="el-icon-money"/> 销售总量</div>
          <div style="padding: 10px 0;text-align: center;font-weight: bold">
            ￥1000000
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card style="color: #67C23A">
          <div><i class="el-icon-coin"/> 收益总额</div>
          <div style="padding: 10px 0;text-align: center;font-weight: bold">
            ￥300000
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card style="color: #E6A23C">
          <div><i class="el-icon-s-shop"/> 门店总数</div>
          <div style="padding: 10px 0;text-align: center;font-weight: bold">
            30
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <div id="main1" style="width: 500px;height:450px;"></div>
      </el-col>
      <el-col :span="12">
        <div id="main2" style="width: 500px;height:450px;"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: "Home",
  methods: {
    myEcharts1() {
      var option = {
        title: {
          text: '各季度会员数量统计',
          subtext: '趋势图',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          left: 'right'
        },
        xAxis: {
          type: 'category',
          data: ["第一季度", "第二季度", "第三季度", "第四季度"]
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '星巴克',
            data: [],
            type: 'line'
          },
          {
            name: '星巴克',
            data: [],
            type: 'bar'
          },
          {
            name: '瑞幸',
            data: [],
            type: 'line'
          },
          {
            name: '瑞幸',
            data: [],
            type: 'bar'
          },
        ]
      };

      var chartDom1 = document.getElementById('main1');
      var myChart1 = echarts.init(chartDom1);

      axios.get("/echarts/members").then(res => {
        console.log(res.data.data)
        option.series[0].data = res.data.data
        option.series[1].data = res.data.data
        option.series[2].data = [3, 5, 6, 7]
        option.series[3].data = [3, 5, 6, 7]
        myChart1.setOption(option)
      })
    },
    myEcharts2() {
      var option = {
        title: [
          {
            text: '每季度会员占比',
            subtext:'比例图',
            left: 'center'
          },
        ],

        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '星巴克',
            type: 'pie',
            radius: '50%',
            center: ['25%', '50%'],
            label: {            //饼图图形上的文本标签
              normal: {
                show: true,
                position: 'inner', //标签的位置
                textStyle: {
                  fontWeight: 300,
                  fontSize: 14,    //文字的字体大小
                  color: "#fff"
                },
                formatter: '{d}%'
              }
            },
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          },
          {
            name: '瑞幸',
            type: 'pie',
            radius: '50%',
            center: ['75%', '50%'],
            label: {            //饼图图形上的文本标签
              normal: {
                show: true,
                position: 'inner', //标签的位置
                textStyle: {
                  fontWeight: 300,
                  fontSize: 14,    //文字的字体大小
                  color: "#fff"
                },
                formatter: '{d}%'
              }
            },
            data: [
              {name: "第一季度", value: 3},
              {name: "第二季度", value: 5},
              {name: "第三季度", value: 6},
              {name: "第四季度", value: 7}
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };


      var chartDom2 = document.getElementById('main2');
      var myChart2 = echarts.init(chartDom2);

      axios.get("/echarts/members").then(res => {
        option.series[0].data = [
          {name: "第一季度", value: res.data.data[0]},
          {name: "第二季度", value: res.data.data[1]},
          {name: "第三季度", value: res.data.data[2]},
          {name: "第四季度", value: res.data.data[3]}
        ]
        myChart2.setOption(option)
      })
    }
  },
  mounted() {
    this.myEcharts1();
    this.myEcharts2();
  }
}
</script>

<style scoped>

</style>